<template>
  <div class="prediction">
    <a-row>
      <a-col>
        <a-button type="primary" :loading="loadingStatus" @click="generateModel"
          >生成最新模型</a-button
        >
      </a-col>
    </a-row>
    <div class="input">
      <div class="left">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="建造时间" name="property_year">
            <a-input-number
              v-model:value="Prediction_Info['property_year']"
              :min="1900"
              :max="2100"
            />
          </a-form-item>
          <a-form-item label="期望面积" name="property_area">
            <a-input-number
              v-model:value="Prediction_Info['property_area']"
              :min="10"
              :max="1000"
            />
          </a-form-item>
          <a-form-item label="客厅数" name="property_livingroom">
            <a-input-number
              v-model:value="Prediction_Info['property_livingroom']"
              :min="0"
              :max="100"
            />
          </a-form-item>
          <a-form-item label="卧室数" name="property_bedroom">
            <a-input-number
              v-model:value="Prediction_Info['property_bedroom']"
              :min="0"
              :max="100"
            />
          </a-form-item>
          <a-form-item label="浴室数" name="property_lavatory">
            <a-input-number
              v-model:value="Prediction_Info['property_lavatory']"
              :min="0"
              :max="100"
            />
          </a-form-item>
          <a-form-item label="总楼层数" name="property_height">
            <a-input-number
              v-model:value="Prediction_Info['property_height']"
              :min="1"
              :max="100"
            />
          </a-form-item>
          <a-form-item label="楼层位置" name="property_floor">
            <a-select
              v-model:value="Prediction_Info['property_floor']"
              placeholder="请选择房子所在楼层的位置"
            >
              <a-select-option value="地下">地下</a-select-option>
              <a-select-option value="低层">低</a-select-option>
              <a-select-option value="中层">中</a-select-option>
              <a-select-option value="高层">高</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="朝向" name="property_orientation">
            <a-select
              v-model:value="Prediction_Info['property_orientation']"
              placeholder="请选择房子的朝向"
            >
              <a-select-option value="东">东</a-select-option>
              <a-select-option value="东北">东北</a-select-option>
              <a-select-option value="东南">东南</a-select-option>
              <a-select-option value="东西">东西</a-select-option>
              <a-select-option value="北">北</a-select-option>
              <a-select-option value="南">南</a-select-option>
              <a-select-option value="南北">南北</a-select-option>
              <a-select-option value="西">西</a-select-option>
              <a-select-option value="西北">西北</a-select-option>
              <a-select-option value="西南">西南</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="区域" name="property_loc">
            <a-select
              v-model:value="Prediction_Info['property_loc']"
              placeholder="请选择房子所在的区域"
            >
              <a-select-option value="新华">新华</a-select-option>
              <a-select-option value="桥西">桥西</a-select-option>
              <a-select-option value="长安">长安</a-select-option>
              <a-select-option value="裕华">裕华</a-select-option>
              <a-select-option value="开发区">开发区</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 5, span: 10 }">
            <a-button type="primary" @click="onPrediction">预测</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="right">
        <a-result
          v-if="priceVisible"
          status="success"
          :title="'当前预测的房价为：' + Price + '元'"
          sub-title="随着不同时间获取的数据预测的价格可能会有所差异"
        >
        </a-result>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loadingStatus: false,
      labelCol: {
        span: 10,
      },
      wrapperCol: {
        span: 10,
      },
      Prediction_Info: {},
      Price: null,
      priceVisible: false,
    }
  },
  methods: {
    async generateModel() {
      this.loadingStatus = true
      let res = await this.$http.get('/prediction/generate_model/')
      if (res.status == 200) {
        console.log('success')
        this.$msg.success(res.data.msg)
        this.loadingStatus = false
      }
    },
    async onSubmit() {},
    resetFields() {},
    async onPrediction() {
      let res = await this.$http.post(
        '/prediction/generate_price/',
        this.Prediction_Info
      )
      if (res.status == 200) {
        this.Price = res.data
        this.priceVisible = true
      }
    },
  },
}
</script>
<style lang="less" scoped>
.prediction {
  .input {
    margin-top: 50px;
    display: flex;
    div {
      flex: 1;
    }
  }
}
</style>